import { memo, useEffect, useRef } from "react";
import type { FC } from "react";
import { useSetState } from "ahooks";
import { Checkbox, Col, Form, Input, Row, Select } from "antd";
import { Editor } from "../education/edit";
import { getMonth, getYear } from "@/app/utils";

interface IndexProps {
  displayName: string;
}
const Index: FC<IndexProps> = ({ displayName }) => {
  const [state, setState] = useSetState<{ months: any[]; years: any[] }>({
    months: [],
    years: [],
  });
  useEffect(() => {
    setState({ months: getMonth(12), years: getYear(80) });
  }, []);
  const endDate = Form.useWatch("endDate");
  return (
    <>
      <div
        style={{
          margin: "10px 10px 20px",
          fontWeight: "bold",
          fontSize: "16px",
        }}
      >
        {displayName}
      </div>
      <Form.Item name={"title"} label="公司名称">
        <Input></Input>
      </Form.Item>
      <Form.Item name={"subTitle"} label="职位名称">
        <Input></Input>
      </Form.Item>
      <Form.Item label="开始时间">
        <Row gutter={10}>
          <Col span={12}>
            <Form.Item name={["startDate", "year"]} style={{ marginBottom: 0 }}>
              <Select
                allowClear
                placeholder="请选择年份"
                options={state.years}
              ></Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name={["startDate", "month"]}
              style={{ marginBottom: 0 }}
            >
              <Select
                allowClear
                placeholder="请选择月份"
                options={state.months}
              ></Select>
            </Form.Item>
          </Col>
        </Row>
      </Form.Item>
      <Form.Item label="结束时间" style={{ marginBottom: 0 }}>
        <Row gutter={10}>
          <Col span={12}>
            <Form.Item name={["endDate", "year"]} style={{ marginBottom: 0 }}>
              <Select
                allowClear
                disabled={endDate?.untilToday}
                placeholder="请选择年份"
                options={state.years}
              ></Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name={["endDate", "month"]} style={{ marginBottom: 0 }}>
              <Select
                allowClear
                disabled={endDate?.untilToday}
                placeholder="请选择月份"
                options={state.months}
              ></Select>
            </Form.Item>
          </Col>
        </Row>
      </Form.Item>
      <div style={{ overflow: "hidden" }}>
        <Form.Item
          name={["endDate", "untilToday"]}
          valuePropName="checked"
          style={{ float: "right", marginTop: "10px" }}
        >
          <Checkbox>至今</Checkbox>
        </Form.Item>
      </div>
      <Form.Item name={"description"} label="描述">
        <Editor />
      </Form.Item>
      {/* <Form.Item name={'description'} hidden>
      <Input />
    </Form.Item> */}
    </>
  );
};

export default memo(Index);
